<template>
    <div class="app-container calendar-list-container"> 
        <!-- 搜索框，对工段信息进行搜索 -->
      <el-form :inline="true" ref="form2" :model="delform">
        <el-form-item prop="wCodes" >
            <el-select 
                  v-model="delform.wCodes" 
                  filterable 
                  placeholder="请选择工序"
                  class="re-item">
                <el-option
                        v-for="(item,index) in optionswCodes"
                        :key="index"
                        :label="item"
                        :value="item">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item prop="process" >
            <el-input
                clearable
                style="margin-right: 15px"
                :style="{ width: inputWid(delform.delCodes) }"
                v-model="delform.delCodes"
                placeholder="条码"
            ></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" v-waves @click="submitDel('nosingle')">解绑</el-button>
        </el-form-item>
    </el-form>
      <div class="filter-container">
        <!-- style="width: 150px;margin-right:15px;margin-top:7px" -->
        <el-input
                @keyup.enter.native="getData"
                clearable
                v-model="listQuery.deviceBarcode"
                style="margin-right: 15px;;margin-top:7px"
                :style="{ width: inputWid(listQuery.deviceBarcode) }"
                class="filter-item"
                placeholder="机柜条码"
        ></el-input>
        <el-input
                @keyup.enter.native="getData"
                clearable
                v-model="listQuery.palletCode"
                style="margin-right: 15px;;margin-top:7px"
                :style="{ width: inputWid(listQuery.palletCode) }"
                class="filter-item"
                placeholder="栈板条码"
        ></el-input>
        <el-input
                @keyup.enter.native="getData"
                clearable
                v-model="listQuery.deviceCode"
                style="margin-right: 15px;;margin-top:7px"
                :style="{ width: inputWid(listQuery.deviceCode) }"
                class="filter-item"
                placeholder="器件/附件条码"
        ></el-input>
        <el-select
        clearable
        v-model="listQuery.isDelete"
        style="width: 150px;margin-right:15px;margin-top:7px"
        class="filter-item"
        >
            <el-option
            :value="item"
            :label="item"
            v-for="(item,index) in this.isDeleteList"
            :key="index"/>
      </el-select>
        <el-button class="filter-item" style="margin-top:7px" type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
      </div>

    
    <el-dialog title="条码信息修改" :visible.sync="showRevise" width="600px">
        <el-form :model="modifyform">
            <el-form-item label="机柜条码">
                <el-input v-model="modifyform.deviceBarcode" style="width:400px" disabled/>
            </el-form-item>
            <el-form-item label="栈板条码">
                <el-input v-model="modifyform.palletCode" style="width:400px"/>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
        <el-button @click="showRevise = false">取 消</el-button>
        <el-button type="primary" @click="modifySubmit">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 表单 -->
    <el-table :data="tablelList" 
    v-loading="listLoading" 
    element-loading-text="拼命加载中" 
    stripe border fit 
    highlight-current-row 
    style="width: 100%">
        <el-table-column label="条码类型" prop="codeType" align="center"/>
        <el-table-column label="机柜条码" prop="deviceBarcode" align="center"/>
        <el-table-column label="器件条码" prop="deviceCode" align="center"/>
        <el-table-column label="栈板条码" prop="palletCode" align="center"/>
        <el-table-column label="铭牌编码" prop="nameplatesCode" align="center"/>
        <el-table-column label="运维二维码" prop="operationAndMaintenanceOrCode" align="center"/>
        <el-table-column label="子件条码" prop="materialCode" align="center"/>
        <el-table-column label="工序" prop="processOrder" width="80" align="center"/>
        <el-table-column label="产品品号" prop="produceNo" align="center"/>
        <el-table-column label="状态" prop="deviceBarcodeStop" align="center"/>
        <!-- <el-table-column label="产品编号" prop="technologyNo" align="center"/> -->
        <el-table-column label="类型" prop="type" align="center"/>
        <el-table-column label="是否已解绑" prop="isDelete" align="center">
            <template slot-scope="scope">
            <div class="fx">
              {{
                scope.row.isDelete == '0'
                  ? "否" : "是"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="修改原因" prop="context" align="center"/>
        <el-table-column label="操作"  align="center" width="160" v-if="userInfo.roleId != 30">
            <template slot-scope="scope" >
                <div class="fx" style="display: flex">
                <el-button
                    size="mini"
                    type="primary"
                    @click="revise(scope.row)"
                >修改</el-button>
                <el-button
                    icon="el-icon-delete"
                    class="el-button el-button--danger"
                    style="font-size: 15px;"
                    @click="submitDel('single',scope.row,scope.$index)"
                    v-if="scope.row.isDelete == '0'"
                ></el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>

    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    </div>
</template>

<script>
import { finDeviceBarcodeEms, delDeviceBarcodeEms,delDeviceCodeEms,GetEntityRevision,delPalletCodeEms } from '../../api/processRoute'
export default {
    name: 'codeUnbind',
    data() {
        return {
            listQuery: {
                isDelete: '未解绑',
                page:1,
                limit: 20
            },                                //搜索的内容表单
            tablelList: [],                               //table表单的信息           
            listLoading: false,                          //table加载的动画控制条件
            userInfo: this.$store.state.user.userInfo,
            isDeleteList: ['未解绑','已解绑'],
            delform: {
                wCodes: '机柜条码'
            },
            optionswCodes: ['机柜条码','栈板条码','器件/附件条码'],
            total: 0,
            modifyform: {},
            showRevise: false
        }
    },
    computed: {
      inputWid() {
        return function (value) {
            if(!value || (value.length <= 10)){
              return '170px'
            } else {
              return (170 + (String(value).length-10)*6) + 'px'
            }
        }
      }
    },
    methods: {
        // table表单下方的页码组件改变每页显示的数据条数
        handleSizeChange(val) {
          this.listQuery.limit = val
          this.handleFilter()
        },
        // table表单下方的页码组件改变页面
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.handleFilter()
        },
        getData(){
            this.listQuery.page = 1
            this.handleFilter()
        },
        async handleFilter() {
            this.listLoading = true
            let query = Object.assign({},this.listQuery)
            if(!query.deviceBarcode) delete query.deviceBarcode
            if(!query.palletCode) delete query.palletCode
            if(!query.deviceCode) delete query.deviceCode
            query.isDelete = this.listQuery.isDelete == '未解绑'?'0':'1'
            const {data} = await finDeviceBarcodeEms(query)
            this.tablelList = data.list
            this.total = data.count
            this.listLoading = false
        },
        submitDel(type,row,index) {
            this.$prompt(' ', '修改原因', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /[^ \x22]+/,
            inputErrorMessage: '不能为空！'
            }).then(({ value }) => {
                if(type == 'single') {
                    this.delData(row,index,value)
                } else {
                    this.deldeviceCodes(value)
                }
            }).catch(() => {
            });
        },
        async delData(row,index,value){
            let query = {
                deviceCode: row.deviceCode,
                context: value
            }
            const data = await delDeviceCodeEms(query)
            if(data.code == '1'){
                this.tablelList.splice(index, 1)
                this.$message({
                  message: data.msg,
                  type: 'success'
              })
            } else {
              this.$message({
                  message: data.msg,
                  type: 'warning'
              })
            }

        },
        async deldeviceCodes(value){
            if(!this.delform.delCodes) return this.$message.error('条码不能为空！')
            let query = {
                context: value
            }
            if(this.delform.wCodes == '机柜条码'){
                query.deviceBarcode = this.delform.delCodes
            } else if(this.delform.wCodes == '栈板条码') {
                query.palletCode = this.delform.delCodes
            } else if(this.delform.wCodes == '器件/附件条码'){
                query.deviceCode = this.delform.delCodes
            }
            const data = await delDeviceBarcodeEms(query)
            if(data.code == '1'){
                this.$message({
                  message: data.msg,
                  type: 'success'
              })
              this.handleFilter()
            } else {
              this.$message({
                  message: data.msg,
                  type: 'error'
              })
            }

        },
        revise(row){
            this.modifyform = {
                deviceBarcode: row.deviceBarcode,
                palletCode: row.palletCode
            }
            this.showRevise = true
        },
        async modifySubmit(){
            let query = Object.assign({},this.modifyform)
            const data = await delPalletCodeEms(query)
            if(data.code == '1'){
                this.$message({
                  message: data.msg,
                  type: 'success'
              })
              this.showRevise = false
              this.handleFilter()
            } else {
              this.$message({
                  message: data.msg,
                  type: 'error'
              })
            }
        }
    },
      // 在生命周期函数调用"搜索"按钮绑定的函数，显示已有的数据
    mounted() {
        this.handleFilter()
  },
}
</script>

<style>

</style>